<!DOCTYPE html>
<html>

{include file='public/header'}
<style>
    .layui-card{border: 1px solid #ececec;}
    .layui-font-green{display: inline-block;}
</style>
<body>
    <div class="x-nav">
        <span class="layui-breadcrumb">
            <a href="javascript:void(0)">首页</a>
            <a href="javascript:void(0)">数据统计</a>
            <a><cite>用户统计</cite></a>
        </span>
        <a class="layui-btn layui-btn-small" id="reload" title="刷新">
            <i class="layui-icon" style="line-height:30px"><i class="iconfont">&#xe6aa;</i></i>
        </a>
    </div>
    <div class="x-body">
        <div class="layui-row layui-col-space15" style="margin-bottom:10px">
            <div class="layui-col-md3">
                <div class="layui-card">
                    <div class="layui-card-header">
                        <div class="flex" style="width: 100%;">
                            <b>今日</b>
                        </div>
                    </div>
                    <div class="layui-card-body">
                        <div style="display: flex;"><h1 id="today_register_num">0</h1><i class="layui-icon iconfont icon-lytishi1" id="today_register_num_tip"></i></div>
                        <div>
                            <div>今日激活用户充值金额：
                                <div class="layui-font-green" id="today_recharge_amount">0</div>
                            </div>
                        </div>
                        <div>
                            <div>今日激活用户充值人数：
                                <div class="layui-font-green" id="today_recharge_user_num">0</div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="layui-col-md3">
                <div class="layui-card">
                    <div class="layui-card-header flex">
                        <b>昨日</b>
                    </div>
                    <div class="layui-card-body">
                        <h1 id="yesterday_register_num">0</h1>
                        <div>
                            <div>昨日激活用户充值金额：
                                <div class="layui-font-green" id="yesterday_recharge_amount">0</div>
                            </div>
                        </div>
                        <div>
                            <div>昨日激活用户充值人数：
                                <div class="layui-font-green" id="yesterday_recharge_user_num">0</div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="layui-col-md3">
                <div class="layui-card">
                    <div class="layui-card-header flex">
                        <div class="flex" style="width: 100%;">
                            <b>本月</b>
                            <span class="layui-badge layui-bg-green">包含当日</span>
                        </div>
                    </div>
                    <div class="layui-card-body">
                        <h1 id="this_month_register_num">0</h1>
                        <div>
                            <div>本月激活用户充值金额：
                                <div class="layui-font-green" id="this_month_recharge_amount">0</div>
                            </div>
                        </div>
                        <div>
                            <div>本月激活用户充值人数：
                                <div class="layui-font-green" id="this_month_recharge_user_num">0</div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="layui-col-md3">
                <div class="layui-card">
                    <div class="layui-card-header flex">
                        <div class="flex" style="width: 100%;">
                            <b>总用户</b>
                            <span class="layui-badge layui-bg-green">包含当日</span>
                        </div>
                    </div>
                    <div class="layui-card-body">
                        <h1 id="total_register_num">0</h1>
                        <div>
                            <div>新增用户的充值金额：
                                <span class="layui-font-green"><span id="total_recharge_amount">0</span></span>
                            </div>
                        </div>
                        <div>
                            <div>新增用户的充值人数：
                                <span class="layui-font-green"><span id="total_recharge_user_num">0</span></span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <blockquote class="layui-elem-quote">近10日数据统计</blockquote>

        <div class="layui-tab">
            <ul class="layui-tab-title">
                <li class="layui-this">近10天汇总</li>
                <li>新增用户充值分析</li>
            </ul>
            <div class="layui-tab-content" style="padding: 0;">
                <div class="layui-tab-item layui-show">
                    <table id="lastStatistics" lay-filter="lastStatistics"></table>
                </div>
                <div class="layui-tab-item">
                    <table id="newUserRechargeAnalysis" lay-filter="newUserRechargeAnalysis"></table>
                </div>
            </div>
        </div>
        
    </div>
    <script>
        let params = {
            elem: '#lastStatistics'
            , url: '/cps/user/lastStatistics' //数据接口
            , id: 'lastStatistics'
            , page:false
            , toolbar:true
            , cols: [[ //表头
                { field: 'date', title: '日期', align:'center'}
                , { field: 'new_user', title: '激活用户数<i class="layui-icon iconfont icon-lytishi1" id="new_user"></i>', align:'center' }
                , { field: 'activation_user_recharge_people_num', title: '激活用户充值人数', align:'center' }
                , { field: 'activation_user_recharge_num', title: '激活用户充值笔数', align:'center' }
                , { field: 'activation_user_recharge_amount', title: '激活用户充值金额', align:'center' }
                , { field: 'recharge_user_num', title: '累计充值人数', align:'center' }
                , { field: 'recharge_num', title: '累计充值笔数', align:'center' }
                , { field: 'recharge_amount', title: '累计充值金额', align:'center' }
            ]]
            ,done:function(){
                tips('#new_user','#new_user','今日从推广链接进入的用户数')
            }
        }
        tableList(params)

        let params1 = {
            elem: '#newUserRechargeAnalysis'
            , url: '/cps/user/newUserRechargeAnalysis' //数据接口
            , id: 'newUserRechargeAnalysis'
            , page: false
            , toolbar:true
            , cols: [[ //表头
                { field: 'date', title: '日期', align:'center'}
                , { field: 'new_user_num', title: '新增激活用户数', align:'center' }
                , { field: 'recharge_people_num', title: '充值人数', align:'center' }
                , { field: 'total_recharge', title: '累计充值', align:'center' }
                , { field: 'per_capita', title: '人均贡献', align:'center' }
                , { field: 'one_day_recharge', title: '当天充值', align:'center' }
                , { field: 'two_day_recharge', title: '第2天充值', align:'center' }
                , { field: 'three_day_recharge', title: '第3天充值', align:'center' }
                , { field: 'four_day_recharge', title: '第4天充值', align:'center' }
                , { field: 'five_day_recharge', title: '第5天充值', align:'center' }
            ]]
        }
        tableList(params1)
        Ajax('/cps/user/statistics', {}).then(data => {
            var keys = Object.keys(data.data);
            for (var i = 0; i < keys.length; i++) {
                $(`#${keys[i]}`).html(data.data[keys[i]])
            }
        });
        
        tips('#today_register_num_tip','#today_register_num_tip','今日从推广链接进入的用户数')
</script>
</body>

</html>